<template>
  <div class="app-content">
    <!-- 顶部tips -->
    <div class="tips" ref="tips">
      <h3>线下订单表</h3>
      <!-- 搜索内容框 -->
      <el-form :inline="true">
        <el-form-item label="订单编号">
          <el-input size="small" v-model="SearchForm.OrderNo" placeholder="请输入您要搜索的订单编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="OnSeacrh">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间表格部分 -->
    <el-table v-if="tabaleHeight.length" ref="table" :data="tableData" border style="width: 100%" :height="tabaleHeight"
      size="mini" v-loading="loading">
      <el-table-column :label="item.title" :width="item.width" show-overflow-tooltip v-for="item in Page.tableHeader"
        :key="item.title">
        <template v-slot="scope">
          <ColumnTable :CurretItem="scope.row" :ItemValue="item.value" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize" layout="total, prev, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getOfflineOrderList } from "@/api/index" // 线下订单列表
import { Page } from "./index"; // 引入页面信息
import { mapState, mapActions } from "vuex"; // 引入vuex属性
import mixin from "@/mixins/mixin"; // 引入mixin
export default {
  mixins: [mixin],
  data() {
    return {
      /* 页面信息 */
      Page,
      /* 搜索条件 */
      SearchForm: {
        OrderNo: "",
      },
      /* 表格加载 */
      loading: true,
      /* 表格数据 */
      tableData: [],
      /* 分页参数 */
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      },
      /* 数据总数 */
      total: 0,
    };
  },
  computed: {
    ...mapState(["isMobile", "CurrentItem"]),
  },
  created() {
    this.GetDataList()
  },
  methods: {
    ...mapActions(["SetCurrentItem"]),
    // 获取订单列表
    async GetDataList() {
      try {
        this.loading = true;
        const data = {
          pageIndex: this.paramsquery.pageIndex,
          orderNo: this.SearchForm.OrderNo,
        }
        const res = await getOfflineOrderList(data)
        res.offlineList.forEach(item=>{
          item.order_time = item.order_time.slice(0,19)
        })
        this.loading = false
        this.tableData = res.offlineList
        this.total = res.pageTotal
        // console.log(res);
      } catch (error) {
        this.loading = false
        console.log(error);
      }

    },
    // 搜索
    OnSeacrh() {
      this.paramsquery.pageIndex = 1
      this.GetDataList()
    },

  },
  components: {

  },
};
</script>

<style scoped lang="less">
@import url(../../../style/index.css);

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
